<template>
    <div>
        <van-nav-bar title="我的优惠券" left-text="返回"  class="leader"  left-arrow @click-left="handleBack">
            <template #right >
               <van-icon name="ellipsis" size='26px' color='#fff' class="pullTab" @click.stop="ShowHidden = !ShowHidden" />
               <Pulltab 
                v-if="ShowHidden" 
                @click.stop=""
               />
            </template>
        </van-nav-bar>
        <van-tabs  @click="onClick">
            <van-tab title="未使用">
                <div class="box" v-for="(item) in couponlist" :key="item.id">
                    <ul class="leftUl" >
                        <li>
                            <span class="price">￥</span>
                            <span class="price">{{item.money}}</span>
                            <span class="canUse">满<span>{{item.condition}}</span>可用</span>
                        </li>
                        <li>
                            <p class="address">{{item.store_name}}</p>
                            <span class="allgoods">{{item.show_name}}</span>
                        </li>
                        <li class="time">有效期 <span>{{item.use_start_time}}</span> 至 <span>{{item.use_end_time}}</span></li>
                    </ul >
                    <ul class="rightUl">
                        <li>
                            <div class="receive" >立即使用</div>
                        </li>
                    </ul>
                </div>
            </van-tab>
            <h3>没有更多了~</h3>
            <van-tab title="已使用"><img src="https://www.160dyf.com/Public/vue2/static/img/fail@3x.768730a.png" alt="暂无" width="200px" style="margin:10px auto"></van-tab>
             <van-tab title="已过期"><img src="https://www.160dyf.com/Public/vue2/static/img/fail@3x.768730a.png" alt="暂无" width="200px" style="margin:10px auto"></van-tab>
        </van-tabs>
    </div>
</template>

<script>
import {mapState} from 'vuex'
import {Toast} from 'vant'
import Pulltab from '../components/Pulltab.vue'
    export default {
        components: {
            Pulltab,
        },
        data() {
            return {
                checked:true,
                ShowHidden: false,
                couponlist:[]
            }
        },
        methods: {
            HiddenClick () {
                this.ShowHidden = false
            },
            onClick(name, title) {
                Toast(title);
                console.log(name,title);
            },
            handleBack(){
                this.$router.go(-1)
            },
        },
        computed: {
            ...mapState({
                couponList:state=>state.coupon.couponList
            }),
        },
        created () {
            this.couponlist=this.couponList
            console.log(this.couponList);
        },
        mounted () {
            document.addEventListener('click', this.HiddenClick)
        },
    }
</script>

<style src="../assets/css/coupon.css" scoped>

</style>
<style scoped>
body{
    background-color: #fff;
}
::v-deep .van-nav-bar .van-icon {
  color: #fff;
  font-size: 20px;
}
::v-deep .van-nav-bar__left span,
::v-deep .van-nav-bar__title {
  color: #fff;
  font-size: 16px;
}
</style>